<template>
  <div class="my">
    <x-header :left-options="{showBack: false}">我的</x-header>
    <my-tabbar></my-tabbar>
    <group>
      <cell :title="UserName" is-link link="/main/userInfo">
        <img class="avatar" slot="icon" src="../../assets/avatar.jpg">
        <div slot="inline-desc">编号：{{UserCode}}</div>
      </cell>
    </group>
    <group>
      <grid :cols="4">
        <!--<grid-item label="电子装箱单" link="/main/eirInfo">-->
          <!--<img slot="icon" src="../../assets/eir.png">-->
        <!--</grid-item>-->
        <!--<grid-item label="车辆跟踪" link="/main/map">-->
          <!--<img slot="icon" src="../../assets/map.png">-->
        <!--</grid-item>-->
        <grid-item label="帮助" link="/main/help">
          <img slot="icon" src="../../assets/help.png">
        </grid-item>
        <grid-item label="我的钱包" link="/main/wallet">
          <img slot="icon" src="../../assets/package.png">
        </grid-item>
        <grid-item label="检测更新" @click.native="updateApp">
          <img slot="icon" src="../../assets/update.png">
        </grid-item>
        <grid-item label="应用信息" link="/main/appInfo">
          <img slot="icon" src="../../assets/app_version.png">
        </grid-item>
        <grid-item label="设置">
          <img slot="icon" src="../../assets/setting.png">
        </grid-item>
        <grid-item label="联系客服" link="/main/customer">
          <img slot="icon" src="../../assets/customer.png">
        </grid-item>
        <grid-item label="退出登录" @click.native="logout">
          <img slot="icon" src="../../assets/logout.png">
        </grid-item>
      </grid>
    </group>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell,
  Box,
  XButton,
  Grid,
  GridItem
} from 'vux'
import MyTabbar from '../../components/MyTabbar.vue'
import { mapState, mapMutations } from 'vuex'
import versionUtils from '../../util/versionUtils'
import { getAppInfo } from '../../api/api.com'
export default {
  name: 'my',
  components: {
    XHeader,
    Group,
    Cell,
    Box,
    XButton,
    MyTabbar,
    Grid,
    GridItem
  },
  data () {
    return {}
  },
  computed: {
    ...mapState({
      UserName: state => state.user.UserName,
      UserCode: state => state.user.UserCode
    })
  },
  methods: {
    updateApp () {
      this.$store.state.app.loading = {
        show: true,
        text: '正在检测...'
      }
      versionUtils.getAppVersion().then(version => {
        getAppInfo().then(res => {
          this.$store.state.app.loading = {
            show: false,
            text: ''
          }
          if (res.status === 200) {
            const data = res.data[0]
            this.appUpdateInfo = data
            if (versionUtils.strVersionToNumber(this.appUpdateInfo.version) > versionUtils.strVersionToNumber(version)) {
              this.versionUtils.updateApp()
            } else {
              this.$vux.toast.text('当前已是最新版本')
            }
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      })
    },
    logout () {
      this.$store.state.user.UserType = '0'
      this.resetOrderList()
      this.resetMyOrder()
      this.resetHistoryOrder()
      this.$store.state.chat.socket.close()
      this.$router.push({
        path: '/login'
      })
    },
    ...mapMutations({
      resetOrderList: 'order/resetOrderList',
      resetMyOrder: 'order/resetMyOrder',
      resetHistoryOrder: 'order/resetHistoryOrder'
    })
  }
}
</script>

<style lang="less">
.my{
  .avatar{
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .cell-icon{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
</style>
